<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid Demo</title>  

<link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" />
<script src="scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="scripts/jquery.jqGrid.js" type="text/javascript"></script>
<script src="scripts/js/jqModal.js" type="text/javascript"></script>
<script src="scripts/js/jqDnR.js" type="text/javascript"></script>
</head>
<body>
<h2>My Grid Data</h2>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table> 
<div id="pager" class="scroll" style="text-align:center;"></div> 
 <script type="text/javascript">
var lastSelectedId;
var theme = "steel";

$("head").append("<link>");
css = $("head").children(":last");
css.attr({
   rel:  "stylesheet",
   type: "text/css",
   href: "scripts/themes/"+theme+"/grid.css",
   title: theme,
   media: "screen"
});

$('#list').jqGrid({
     url:'grid.php',
  datatype: 'json',
  mtype: 'POST',
     colNames:['ID','Name', 'Price', 'Promotion'],
     colModel:[    
       {name:'product_id',index:'product_id', width:55,editable:false},     
       {name:'name',index:'name', width:100,editable:true, edittype:'text',editoptions:{size:30,maxlength:50}},
       {name:'price',index:'price', width:80, align:'right',formatter:'currency', editable:true},
       {name:'on_promotion',index:'on_promotion', width:80, formatter:'checkbox',editable:true, edittype:'checkbox'}    
     ],
     rowNum:10,
     rowList:[5,10,20,30],
     imgpath: 'scripts/themes/'+theme+'/images',//alters buttons
     pager: $('#pager'),
     sortname: 'product_id',
    viewrecords: true,
    sortorder: "desc",
    caption:"JSON Example",
  width:600,
  height:250,  
  onSelectRow: function(id){
    if(id && id!==lastSelectedId){
      $('#list').restoreRow(lastSelectedId);
      $('#list').editRow(id,true,null,onSaveSuccess);
      lastSelectedId=id;
    }
  },
  editurl:'grid.php?action=save'
});
function onSaveSuccess(xhr)
{
  response = xhr.responseText;
  if(response == 1)
    return true;
  return false;
}
</script>
</body>
</html>
